<template>
  <div>
    <div style="position: relative">
      <!--头部轮播-->
      <van-swipe :autoplay="5000" indicator-color="red">
        <van-swipe-item v-for="(item, index) in swipeImages" :key="index">
          <van-image class="swipe-img" :src="item.img" @click="swipeImageClick(item)" fit="fill"></van-image>
        </van-swipe-item>
      </van-swipe>

    </div>
    <!--中部应用入口-->
    <van-row class="mid-app">
      <van-col span="12" v-for="(it, idx) in middleApps" :key="idx" @click="goGrid9(idx)" class="mid-item click-box">
        <img :src="'static/mobile/img/home/'+it.icon" class="line2-icon"/>
        <div>
          <div class="mid-title">{{it.title}}</div>
          <div class="mid-text light-txt">{{it.text}}</div>
        </div>
      </van-col>
    </van-row>
    <!-- -->
    <van-row class="app-con" style="margin-top: 6px">

      <app-block title="常用服务">
        <van-grid :column-num="4">
          <van-grid-item
                  :info="getTtemDotInfo(item)"
                  v-for="(item,index) in usList"
                  :key="index"
                  :icon="item.icon"
                  :text="item.title"
                  :dot="getDotFlag(item)"
                  @click="goPage(item.page)">
          </van-grid-item>
          <van-grid-item @click="detailMore(1)" icon="static/mobile/icon/more.png" text="更多" />
        </van-grid>
      </app-block>
      <app-block title="其他服务">
        <van-grid :column-num="4">
          <van-grid-item v-for="(item,index) in osList" :key="index" :icon="item.icon" :text="item.title" @click="goPage(item.page)"/>
          <van-grid-item @click="detailMore(2)" icon="static/mobile/icon/more.png" text="更多" />
        </van-grid>
      </app-block>

    </van-row>
  </div>
</template>

<script>
  import AppBlock from '@/components/AppBlock'
  import { us,os } from '@/config/work.js'
  import { getAction } from "@/api";


  export default {
    name: "tab-home",
    components:{
      AppBlock
    },
    data() {
      return {
        swipeImages: [
          {img: 'static/mobile/img/banner/banner1.png', link: ''},
          {img: 'static/mobile/img/banner/banner2.jpg', link: ''},
          {img: 'static/mobile/img/banner/banner3.jpg', link: ''},
          {img: 'static/mobile/img/banner/banner4.jpg', link: ''},
        ],
        middleApps: [
          {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
          {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
        ],
        usList:us.data,
        osList:os.data,

        websock:'',
        heartCheck:null,
        lockReconnect:false,
        msgCount:0,
        dot:{
          mailHome:false
        }

      };
    },
    methods: {
      goGrid9(index){
        if(index==0){
          this.$router.push({name: "grid9"})
        }else if(index == 1){
          this.$router.push({name:'draft'})
        }
      },
      goPage(page){
        if(!page){
            return false;
        }
        if(page==='annotationList'){
          this.msgCount = 0
        }
        this.dot[page]=false
        this.$router.push({name: page})
      },
      onBuyClick() {
        //this._routePushQ('ProductDetail', {id: 1});
      },
      onMessageClick() {
        //this._routePush('MessagePage');
      },
      swipeImageClick() {

      },
      detailMore(flag){
        this.$router.push({
          name:'worklist',
          params:{
            type:flag
          }
        })
      },

      //websocket
      initWebSocket: function () {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        var userId = this.$store.getters.userid;
        var url = window._CONFIG['domainURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
        console.log('websocket url>>'+url);
        this.websock = new WebSocket(url);
        this.websock.onopen = this.websocketOnopen;
        this.websock.onerror = this.websocketOnerror;
        this.websock.onmessage = this.websocketOnmessage;
        this.websock.onclose = this.websocketOnclose;
      },
      websocketOnopen: function () {
        console.log("WebSocket连接成功");
        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnerror: function () {
        console.log("WebSocket连接发生错误");
        this.reconnect();
      },
      websocketOnmessage: function (e) {
        console.log("-----接收消息-------",e.data);
        var data = eval("(" + e.data + ")"); //解析对象
        if(data.cmd == "topic"){
          //系统通知
          this.loadCount('1')
        }else if(data.cmd == "user"){
          //用户消息
          this.loadCount('2')
        } else if(data.cmd == 'email'){
          this.loadEmailCount()
        }

        //心跳检测重置
        //this.heartCheck.reset().start();
      },
      websocketOnclose: function (e) {
        console.log("connection closed (" + e.code + ")");
        this.reconnect();
      },
      websocketSend(text) { // 数据发送
        try {
          this.websock.send(text);
        } catch (err) {
          console.log("send failed (" + err.code + ")");
        }
      },
      reconnect() {
        var that = this;
        if(that.lockReconnect) return;
        that.lockReconnect = true;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
          console.info("尝试重连...");
          that.initWebSocket();
          that.lockReconnect = false;
        }, 5000);
      },
      loadCount(flag){
        console.log(flag)
        let url = '/sys/annountCement/listByUser'
        getAction(url).then(res=>{
          if(res.success){
            let msg1Count = res.result.anntMsgTotal;
            let msg2Count = res.result.sysMsgTotal;
            this.msgCount = msg1Count + msg2Count
          }
        })
      },
      loadEmailCount(){
        this.dot.mailHome = true
      },
      getTtemDotInfo(item){
        if(item.page==='annotationList' && this.msgCount>0){
          return this.msgCount
        }
        return '';
      },
      getDotFlag(item){
        return !!this.dot[item.page]
      }
    },
    mounted() {
      console.log("-----------home------------")
      this.initWebSocket();
      this.loadCount(0);
    }
  }
</script>

<style scoped lang="less">
  .swipe-text-con {
    height: 30px;
    .swipe-text-item {
      height: 30px;
      display: flex;
      background-color: #fff7cc;
      align-items: center;
      .swipe-text-txt {
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        padding: 0 10px;
        color: #f60;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .msg-con {
    position: absolute;
    top: 20px;
    right: 20px;
    .msg-image {
      width: 36px;
      height: 36px;
    }
    .msg-text {
      position: absolute;
      top: -2px;
      right: 4px;
      box-sizing: border-box;
      min-width: 18px;
      padding: 1px 5px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #f44;
      border-radius: 30px;
      transform: translateX(50%);
      transform-origin: 100%;
    }
  }

  .money-all {
    background-color: white;
    margin-top: 10px;
    text-align: center;
    padding: 20px 0;
  }

  .bot-app {
    margin-top: 10px;
    margin-bottom: 20px;
    .bot-item {
      display: flex;
      padding: 6px 10px;
      align-items: center;
      background-color: white;
      border: 1px solid #f7f7f7;
      .bot-text {
        font-size: 12px;
        .bot-small {
          margin-top: 2px;
        }
      }
      .line4-icon {
        width: 40px;
        height: 40px;
        margin: 6px;
      }
    }
  }

  .mid-app {
    .mid-item {
      display: flex;
      align-items: center;
      border: 1px solid #f7f7f7;
      padding: 10px;
      .line2-icon {
        width: 60px;
        height: 60px;
      }
      .mid-title {
        font-size: 14px;
      }
      .mid-text {
        margin-top: 2px;
        font-size: 12px;
      }
    }
  }

  .app-con {
    margin: 12px 0;
    .app-item {
      border: 1px solid #f7f7f7;
      text-align: center;
      position: relative;
      padding: 24px 0;
      .flag-icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 36px;
        height: 36px;
      }
      .app-text {
        font-size: 14px;
      }
      .app-icon {
        width: 36px;
        height: 36px;
      }
    }
  }

  .num-con {
    margin: 12px 0;
    .money-big {
      font-size: 20px;
    }
    .ins-txt {
      font-size: 12px;
      margin-top: 6px;
    }
    .right-con {
      border-left: 1px solid #dddddd;
    }
  }

  .fresher-all {
    padding: 10px;
    .fresher-back {
      background-size: 100% 100%;
      padding: 10px 16px 16px 16px;
      .rate-big {
        font-size: 30px;
      }
      .fresher-top {
        display: flex;
        justify-content: space-between;
        color: #FE7846;
        .fresher-right {
          font-size: 14px;
          border-radius: 20px;
          padding: 1px 6px;
          border: 1px solid #FE7846;
        }
      }
      .fresh-month {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 10px;
        .month-txt {
          margin: 0 20px;
        }
        .month-line {
          width: 24%;
          height: 1px;
          background-color: #aaaaaa;
        }
      }
      .buy-btn {
        width: 70%;
        font-size: 16px;
        height: 36px;
        line-height: 30px;
      }
    }
  }

  .swipe-img {
    vertical-align: bottom;
    width: 100%;
    height: 50vw;
  }
</style>
